<template>
	<view class="page-body p50 bg-white" :class="[app.setCStyle()]">
		<u-navbar :is-back="false" title="" title-width="100%">
			<view class="u-p-l-20 u-p-r-20 w100 nav-title">
				<view class="left-wrap">
					<u-icon @click="app.goPage(-1)" class="fs36" name="arrow-left"></u-icon>
					<u-icon @click="app.goPage('/')" class="fs36 u-m-l-20" name="home"></u-icon>
				</view>
				<view class="u-text-center fs36">{{settings.site_name}}</view>
			</view>
		</u-navbar>
		
		<view class="mobile-login">
			<view class="title">
				<view class="fs40">绑定您的手机号</view>
				<view class="fs26 color-99 u-m-t-10">为了您的隐私安全，请绑定手机号</view>
			</view>
			<u-form :model="model" ref="uForm" :errorType="errorType" class="mt80">
				<u-form-item left-icon="../../../static/public/images/login-mobile.png"
					:left-icon-style="leftIconStyle"
					:label-position="labelPosition"
					label="手机" 
					prop="mobile">
					<u-input :border="border" placeholder="请输入您的手机号" v-model="model.mobile" type="number"></u-input>
				</u-form-item>
				<u-form-item left-icon="../../../static/public/images/login-captcha.png"
					:left-icon-style="leftIconStyle"
					:label-position="labelPosition" 
					label="验证码"
					prop="code" label-width="150">
					<u-input :border="border" placeholder="请输入您的验证码" v-model="model.code" type="text"></u-input>
					<u-button shape="circle" 
						:plain="true" 
						hover-class="none"
						slot="right" 
						type="default" 
						size="mini" 
						class="send-btn" 
						@click="getCode">{{codeTips}}</u-button>
				</u-form-item>
				<u-form-item left-icon="../../../static/public/images/login-password.png" 
					:left-icon-style="leftIconStyle"
					:label-position="labelPosition" 
					label="新密码" 
					prop="password">
					<u-input :password-icon="false" :border="border" type="password" v-model="model.password" placeholder="请输入您的密码"></u-input>
				</u-form-item>
				<u-form-item left-icon="../../../static/public/images/login-password.png" 
					:left-icon-style="leftIconStyle"
					:label-position="labelPosition" 
					label="确认新密码" 
					prop="rePassword">
					<u-input :password-icon="false" :border="border" type="password" v-model="model.rePassword" placeholder="请再次输入您的密码"></u-input>
				</u-form-item>
				<!-- <u-form-item left-icon="../../../static/public/images/login-invite.png"
					:left-icon-style="leftIconStyle"
					:label-position="labelPosition"
					label="邀请会员ID" 
					prop="invite_code">
					<u-input :border="border" placeholder="请输入您邀请码" v-model="model.invite_code" type="text"></u-input>
				</u-form-item> -->
				
				<u-button size="default" hover-class="none" class="defaultbtn mt40" shape="circle"  @click="submit">确定登录</u-button>
				
				<view class="mt50 text-center fs26 color-99">
					我已阅读并同意<text style="color: #5CB61A;" @click="app.goPage('/pages/public/regagreement')">《注册协议》</text>
				</view>
				
				<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
			</u-form>
			
		</view>
		
	</view>
</template>

<script>
	let that = this;
	
	export default {
		data() {
			return {
				settings: uni.getStorageSync('setting'),
				baseUrl:this.config.baseUrl,
				returnUrl:'',
				logintype: '短信登录',
				verifyUrl: '',
				showVerify: false,
				model: {
					phone: '',//uni.getStorageSync("loginPhone"),
					mobile:'',
					code: '',
					password: '',
					rePassword:'',
					invite_code:'',
					openid: this.app.getWxOpenId(),
					iv:'',
					encryptedData:''
				},
				rulesgetCode:{
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					]
				},
				rules: {
					mobile: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change','blur'],
						}
					],
					code: [
						{
							min: 6,
							max: 6,
							required: true,
							message: '请输入6位验证码',
							trigger: ['change','blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change','blur'],
						}
					],
					password: [
						{
							required:  true,
							message: '请输入密码',
							trigger: ['change','blur'],
						},
						{
							min: 8,
							message: '密码不能少于8个字符',
							trigger: 'change' ,
						}
					],
					rePassword: [
						{
							required: true,
							message: '请重新输入密码',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.model.password;
							},
							message: '两次输入的密码不相等',
							trigger: ['change','blur'],
						}
					],
				},
				border: false,
				check: false,
				labelPosition: 'top',
				codeTips: '获取验证码',
				errorType: ['toast'],
				leftIconStyle: {width:'32rpx',height:'43rpx',margin:'15rpx 10rpx 0 0'}
			};
		},
		onLoad(options) {
			let that = this;
			let share_token = uni.getStorageSync("share_token");
			if (share_token != '' && share_token != 'null'){
				setTimeout(() => {
					that.model.invite_code = share_token;
				},500);
			}
		},
		computed: {
			borderCurrent() {
				return this.border ? 0 : 1;
			},
		},
		onShow() {
			uni.removeStorageSync("isNotLoginTip");//未登陆提示，此值会限制网络请求
		},
		onReady() {
		},
		methods: {
			submit() {
				this.$refs.uForm.setRules(this.rules);
				this.$refs.uForm.validate(valid => {
					if (!valid) {
						return false;
					}
					//验证手机验证码
					this.$u.post('weixin/api.index/bindMobile',this.model).then(res => {
						if (res.code < 0){
							this.showVerify = res.data.showVerify;
							this.$u.toast(res.msg);
							this.changeVerifyUrl();
							this.model.verifyCode = '';
							return false;
						}
						this.loginGo(res);
					})
					
				});
			},
			getPhoneNumber (e) {
				//小程序手机授权登陆
				if (e.detail.errMsg == "getPhoneNumber:ok") {
				    this.$u.post('weixin/api.index/loginByMpPhone', {
						iv:e.detail.iv,
						encryptedData:e.detail.encryptedData,
						openid:this.app.getWxOpenId()
					}).then(res => {
						if (res.data.must_reg == 1){
							let phoneNumber = res.data.phoneNumber;
							uni.showModal({
								title: '提示',
								content: '手机号码未注册会员',
								showCancel: true,
								confirmText: '立即注册',
								cancelText: '暂不注册',
								success: function(res) {
									if (res.confirm) {
										uni.setStorageSync("wxEncryptedData", e.detail); //记住微信授权加密信息
										uni.redirectTo({
											url: `register?phoneNumber=${phoneNumber}`
										});
									}
								}
							});
							return false;
						}
						if (res.data.token){
							this.loginGo(res);
						}
					})
				}
			 },
			loginGo(res){
				//登录成功后执行
				this.app.setAuthCode(res.data.token);
				if (typeof(this.returnUrl) == 'undefined') { //未读取到页面信息
					uni.redirectTo({
					    url: '/pages/member/center/index'
					});
					return false;
				}
				uni.redirectTo({
					url:'/'+decodeURIComponent(this.returnUrl),
				});
			},
			changeLogin(text) {
				if (this.model.login_type == 0) {
					this.logintype = '密码登录';
					this.model.login_type = 1;
					this.$refs.uForm.setRules(this.msmrules);
				} else {
					this.logintype = '短信登录';
					this.model.login_type = 0;
					this.$refs.uForm.setRules(this.pwrules);
				}
			},
			changeVerifyUrl() {
				if (this.verifyUrl.indexOf('rand=') > -1) {
					this.verifyUrl = this.verifyUrl.substr(0, this.verifyUrl.length - 19);
				}
				this.verifyUrl += '?rand=' + new Date().getTime();
			},
			codeChange(text) {	
				this.codeTips = text;
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					this.$refs.uForm.setRules(this.rulesgetCode);
					this.$refs.uForm.validate(valid => {
						if (valid) {	
							// 向后端请求验证码
							uni.showLoading({
								title: '正在获取验证码',
								mask: true
							})
							this.$u.get('publics/api.sms/sendCode', {
								'type': 'bind_mobile',
								'mobile': this.model.mobile
							}).then(res => {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								if (res.data.code){
									this.$u.toast('测试状态，验证码自动填充');
									this.model.code = res.data.code;
								}else{
									this.$u.toast('验证码已发送');
								}
								this.user_exist = res.data.user_exist;
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							})
						}
					});
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			
			goForget() {
				uni.navigateTo({
					url: '/pages/member/passport/forget'
				});
			},
			goRegister() {
				uni.navigateTo({
					url: '/pages/member/passport/register'
				});
			}
		}
	}
</script>
<style lang="scss">
	.page-body{
		height: auto;
	}
	.nav-title{
		position: relative;
		.left-wrap{
			position: absolute;
			top: 0;
			left: 20rpx;
		}
	}
	.send-btn{
		color: #5CB61A;
		&::after{
			border: 2rpx solid #F0F0F5;
		}
	}
</style>
